<template>
  <div class="personal-center">
    <div class="header">
      <div class="avatar"></div>
      <div class="login-register">
        <router-link to="/login">登录</router-link> / <router-link to="/register">注册</router-link>
      </div>
    </div>
    <div class="orders">
      <div class="order-status">
        <span>我的订单</span>
        <router-link to="/orders">查看全部订单</router-link>
      </div>
      <div class="order-list">
        <div class="order-item">待付款</div>
        <div class="order-item">待发货</div>
        <div class="order-item">已发货</div>
        <div class="order-item">交易完成</div>
        <div class="order-item">交易关闭</div>
      </div>
    </div>
    <div class="settings">
      <div class="setting-item">个人资料</div>
      <div class="setting-item">修改密码</div>
      <div class="setting-item">退出登录</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PersonalCenter'
};
</script>

<style scoped>
.personal-center {
  padding: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.avatar {
  width: 80px;
  height: 80px;
  background-color: #ddd;
  border-radius: 50%;
}
.login-register {
  font-size: 16px;
}
.orders {
  margin-bottom: 20px;
}
.order-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.order-list {
  display: flex;
  justify-content: space-around;
}
.order-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.settings {
  display: flex;
  flex-direction: column;
}
.setting-item {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
  text-align: center;
}
</style>